<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/ckform.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <style type="text/css">
        body {
            font-size: 20px;
            padding-bottom: 40px;
            background-color: #e9e7ef;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
    <%--提示消息插件--%>
    <script src="js/Dream-Msg/lib/dream-msg.min.js"></script>
    <script>
        //页面一加载就执行
        $(function () {
            getUserList(1, "");

            //搜索查询
            $(".queryBtn").click(function () {
                var uname = $("#uname").val();
                getUserList(1,uname)
            })
        })

        //修改用户状态
        function modefyStatus(status,uid){
            let pageNo = $("#pageNo").val();
            let uname = $("#uname").val();
            $.post("user/modefyStatus",{"status":status,"uid":uid},
                function (result) {
                    // alert(JSON.stringify(result))
                    if(result.status == 1){
                        getUserList(pageNo,uname)
                        Dreamer.success(result.message,1500)
                        getUserList(pageNo,uname)
                    }else{
                        Dreamer.error(result.message,1500)
                    }
            })
        }


        //获取用户集合
        function getUserList(pageNo, uname) {
            $("#pageNo").val(pageNo)
            $.post("user/getUserList", {"pageNo": pageNo, "uname": uname},
                function (result) {
                    // alert(JSON.stringify(result))
                    let list='';
                    result.list.forEach(function(user){
                        list+= `
                        <tr>
                            <td><a href="user_detail.jsp?uid=\${user.uid}">\${user.uname}</a></td>
                            <td>\${user.truename}</td>
                            <td>\${user.email}</td>
                            <td>\${user.utime}</td>
                            <td>\${user.status==1?'<span style="color: red">冻结</span>':'未冻结'}</td>
                            <td>
                                <button onclick="modefyStatus(\${user.status==1?'2':'1'},\${user.uid})">\${user.status==1?'解冻账号':'冻结账号'}</button>
                            </td>
                        </tr>
                    `;
                    });
                    $("#tbody").html(list);
                    //处理分页
                    let start='';
                    if(result.pageNum<=1){
                        start+=`<a href="javascript:void(0)"><span style="color: #3a3c3c">首页</span></a>&nbsp;
                                <a href="javascript:void(0)"><span style="color: #3a3c3c">上一页</span></a>`;
                    }else{
                        start+=`<a href="javascript:getUserList(1,'\${uname}')">首页</a>&nbsp;
                                <a href="javascript:getUserList(\${result.pageNum-1},'\${uname}')">上一页</a>`;
                    }
                    let end='';
                    if(result.pageNum>=result.pages){
                        end+=`<a href="javascript:void(0)"><span style="color: #3a3c3c">下一页</span></a>&nbsp;
                                <a href="javascript:void(0)"><span style="color: #3a3c3c">末页</span></a>`;
                    }else{
                        end+=`<a href="javascript:getUserList(\${result.pageNum+1},'\${uname}')">下一页</a>&nbsp;
                                <a href="javascript:getUserList(\${result.pages},'\${uname}')">末页</a>`;
                    }

                    let nums='';
                    result.navigatepageNums.forEach(function (num) {
                        if(num==result.pageNum){
                            nums+=`<a href="javascript:void(0)" style="color: red">\${num}</a>&nbsp;&nbsp;&nbsp;`;
                        }else{
                            nums+=`<a href="javascript:getUserList(\${num},'\${uname}')">\${num}</a>&nbsp;&nbsp;&nbsp;`;
                        }
                    })

                    let foot=`\${start}  【&nbsp;&nbsp;\${nums}】  \${end}   |||   总数据量:\${result.total}`;
                    $("#pagenationId").html(foot)
                })
        }
    </script>
</head>
<body>

<form id="form1" class="form-inline definewidth m20" action="#" method="get">
    <font color="#777777"><strong>用户名：</strong></font>
    <input type="hidden" name="pageNo" id="pageNo">
    <input type="text" name="uname" id="uname" class="abc input-default " placeholder="请填写用户名" value="">&nbsp;&nbsp;
    <button type="button" class="btn btn-primary queryBtn">查询</button>
</form>

<table id="usertable" class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
        <th>用户名</th>
        <th>真实姓名</th>
        <th>Email</th>
        <th>注册日期</th>
        <th>是否冻结</th>
        <th>账户冻结</th>
    </tr>
    </thead>
    <tbody id="tbody">
    <%--填写用户列表数据--%>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" id="pagenationId">

        </td>
    </tr>
    </tfoot>
</table>

</table>

</body>
</html>